<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">

<!--头部导航栏-->
<header id="header" class="bg-white border-bottom border-light-subtle sticky-top bsb-tpl-header-sticky" th:fragment="topbar">
    <nav class="navbar navbar-expand-md bsb-navbar-3 bsb-tpl-navbar-sticky" data-bsb-sticky-target="#header">
        <div class="container">
            <ul class="navbar-nav">
                <li class="nav-item me-3">
                    <a class="nav-link" href="#!" data-bs-toggle="offcanvas" data-bs-target="#bsbSidebar1" aria-controls="bsbSidebar1">
                        <i class="bi-filter-left fs-3 lh-1"></i>
                    </a>
                </li>
            </ul>

            <a class="navbar-brand" th:href="@{main}">
                <img th:src="@{/assets/img/branding/console-logo.svg}" class="bsb-tpl-logo" alt="Logo">
            </a>

            <div class="collapse navbar-collapse" id="bsbNavbar">
                <ul class="navbar-nav bsb-dropdown-menu-responsive ms-auto align-items-center">
                    <!--搜索功能-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="position-relative">
                                <i class="bi bi-search"></i>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
                            <form class="row g-1 px-3 py-2 align-items-center">
                                <div class="col-8">
                                    <label class="visually-hidden" for="inputSearchNavbar" th:text="#{search}"></label>
                                    <input type="text" class="form-control" id="inputSearchNavbar">
                                </div>
                                <div class="col-4">
                                    <button type="submit" class="btn btn-primary" th:text="#{search}"></button>
                                </div>
                            </form>
                        </div>
                    </li>

                    <!--国际化-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="position-relative">
                                <i class="bi bi-globe"></i>
                            </span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-sm bsb-dropdown-animation bsb-fadeIn">
                            <div>
                                <h6 class="dropdown-header fs-7 text-center" th:text="#{multilingual}"></h6>
                            </div>
                            <div>
                                <hr class="dropdown-divider mb-0">
                            </div>

                            <div class="list-group list-group-flush" th:each="item : ${languageList}">
                                <a th:class="${item.active}?'list-group-item list-group-item-action active':'list-group-item list-group-item-action'"
                                   aria-current="true"
                                   th:href="@{/main(language = ${item.marks},menu=${menuActive},fragment=${fragment})}">
                                    <div class="row g-0 align-items-center">
                                        <div class="col-2">
                                            <img th:src="@{${item.image}}" class="img-fluid rounded-pill" th:alt="${item.describe}">
                                        </div>
                                        <div class="col-10">
                                            <div class="ps-3">
                                                <div class="fs-7" th:text="#{${item.name}}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </li>

                    <!--消息-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="position-relative pt-1">
                                <i class="bi bi-chat-left"></i>
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-accent" th:text="${#lists.size(messageList)}">
                                    <span class="visually-hidden" th:text="#{message.new}"></span>
                                </span>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
                            <div>
                                <h6 class="dropdown-header fs-7 text-center" th:text="#{message.new} + '('+${#lists.size(messageList)}+')'"></h6>
                            </div>
                            <div>
                                <hr class="dropdown-divider mb-0">
                            </div>
                            <div class="list-group list-group-flush" th:each="item : ${messageList}">
                                <a href="#!" class="list-group-item list-group-item-action" aria-current="true">
                                    <div class="row g-0 align-items-center">
                                        <div class="col-2">
                                            <img th:src="@{${item.image}}" class="img-fluid rounded-circle" th:alt="${item.name}">
                                        </div>
                                        <div class="col-10">
                                            <div class="ps-3">
                                                <div class="text-dark">[[${item.name}]]</div>
                                                <div class="text-secondary mt-1 fs-7">[[${item.content}]]</div>
                                                <div class="text-secondary mt-1 fs-7">[[${item.time}]]</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div>
                                <hr class="dropdown-divider mt-0">
                            </div>
                            <div>
                                <a class="dropdown-item fs-7 text-center" href="#!" th:text="#{message.all}"></a>
                            </div>
                        </div>
                    </li>

                    <!--通知-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="position-relative pt-1">
                                <i class="bi bi-bell"></i>
                                <span class="p-1 bg-accent border border-light rounded-circle position-absolute top-0 start-100 translate-middle">
                                    <span class="visually-hidden" th:text="#{notify.new}"></span>
                                </span>
                            </span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
                            <div>
                                <h6 class="dropdown-header fs-7 text-center" th:text="#{notify} + '('+${#lists.size(notifyList)} + ')'"></h6>
                            </div>
                            <div>
                                <hr class="dropdown-divider mb-0">
                            </div>

                            <ul class="list-group list-group-flush" th:each="notifyItem : ${notifyList}">
                                <li class="list-group-item">
                                    <a class="dropdown-item d-flex align-items-center" href="#!">
                                        <span>
                                            <i th:class="'bi ' + ${notifyItem.image} + ' me-2'"></i>
                                            <span class="fs-7" th:text="#{${notifyItem.name}}"></span>
                                        </span>
                                        <span class="fs-7 ms-auto text-secondary">[[${notifyItem.time}]]</span>
                                    </a>
                                    <hr class="dropdown-divider m-0">
                                </li>
                            </ul>

                            <div>
                                <a class="dropdown-item fs-7 text-center" href="#!" th:text="#{notify.all}"></a>
                            </div>

                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle bsb-dropdown-toggle-caret-disable" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img th:src="@{/assets/img/profile/profile-img-1.png}" width="35" height="35" class="img-fluid rounded-circle" alt="Ethan Leo">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-md-end bsb-dropdown-animation bsb-fadeIn">
                            <li>
                                <h6 class="dropdown-header fs-7 text-center">欢迎, Kevin</h6>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <a th:href="@{pages-profile}" class="dropdown-item" aria-current="true">
                                    <div class="row g-0 align-items-center">
                                        <div class="col-3">
                                            <img th:src="@{/assets/img/profile/profile-img-1.png}" width="55" height="55" class="img-fluid rounded-circle" alt="Rookie">
                                        </div>
                                        <div class="col-9">
                                            <div class="ps-3">
                                                <div class="text-secondary mt-1 fs-7">青岛竖亥</div>
                                                <div class="text-secondary mt-1 fs-7"><span class="__cf_email__" data-cfemail="234f464c63465b424e534f460d404c4e">000000001@qq.com</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <a class="dropdown-item" th:href="@{/pages-profile}">
                                    <span>
                                        <i class="bi bi-person-fill me-2"></i>
                                        <span class="fs-7" th:text="#{Profile}"></span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#!">
                                    <span>
                                        <i class="bi bi-bell-fill me-2"></i>
                                        <span class="fs-7" th:text="#{notify}"></span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <a class="dropdown-item" th:href="@{pages-profile}">
                                    <span>
                                        <i class="bi bi-gear-fill me-2"></i>
                                        <span class="fs-7" th:text="#{settingsPrivacy}"></span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" th:href="@{pages-faqs}">
                                    <span>
                                        <i class="bi bi-question-circle-fill me-2"></i>
                                        <span class="fs-7" th:text="#{help.center}"></span>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li>
                                <a class="dropdown-item text-center" href="#">
                                    <span>
                                        <span class="fs-7" th:text="#{login.signOut}"></span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
</html>